<template>
    <a-modal v-model="visible" :title="title" :confirmLoading="submitLoading" width="800px" ok-text="确认" cancel-text="取消"
        @ok="addFormSubmit">
        <a-form layout="vertical" :form="events_form">
            <a-form-item label="企业名称">
                <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入企业名称' }] }]" />
            </a-form-item>
            <a-form-item label="企业简称">
                <a-textarea
                    v-decorator="['nickName', { rules: [{ required: true, message: '请输入企业简称' }], initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="社会统一代码">
                <a-input
                    v-decorator="['creditCode', { rules: [{ required: true, message: '请输入社会统一代码' }], initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="纳税人性质">
                <a-select v-decorator="['taxType', { rules: [{ required: true, message: '请选择纳税人性质!' }], initialValue: '' }]">
                    <a-select-option v-for="role in taxData" :key="role.value">
                        {{ role.label }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="邮政编码">
                <a-input v-decorator="['postCode', { initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="邮箱">
                <a-input v-decorator="['email', { initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="开户银行">
                <a-input placeholder="请输入开户银行" v-decorator="['bankNo', { rules: [{ required: true, message: '请输入开户银行' }], initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="银行账号名称">
                <a-input placeholder="请输入银行账号名称" v-decorator="['bankAccountName', { rules: [{ required: true, message: '请输入银行账号名称' }], initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="银行账号">
                <a-input placeholder="请输入银行账号" v-decorator="['bankAccountNo', { rules: [{ required: true, message: '请输入银行账号' }], initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="手机号码">
                <a-input :maxLength="11" v-decorator="['phone', { initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="企业详细地址">
                <a-textarea type="textarea" :maxLength="120" :rows="4"
                    v-decorator="['address', { rules: [{ required: true, message: '请输入企业详细地址' }], initialValue: '' }]" />
            </a-form-item>
            <a-form-item label="公司Logo">
                <img v-if="logo" :src="logo" style="width:180px;height:120px;" />
                <br/>
                <a head="#" @click="uploadImg">附件上传</a>
                <input type="file" ref="certificate" @change="handleChange" style="display: none;" />
            </a-form-item>
        </a-form>

    </a-modal>
</template>

<script>
import md5 from 'md5'
import store from '@/store'
import { TAX_DATA } from '@/store/mutation-types'
import { mapGetters, mapActions } from 'vuex'
import { addPark, updatePark } from "@/api/human/park"
import { uploadNewFile } from "@/api/manage/base"
export default {
    name: 'AddPark',
    data() {
        return {
            taxData: TAX_DATA,
            visible: false,
            logo: '',
            title: '',
            id: '',
            submitLoading: false
        }
    },
    beforeCreate() {
        this.events_form = this.$form.createForm(this, { name: 'events_form' });
    },
    computed: {
        ...mapGetters(['userInfo', 'orgFields', 'accountTypeData', 'orgData']),
        vifyState() {
            var flag = true;
            if (this.id) {
                flag = false;
            }
            return flag;
        }
    },
    methods: {
        async add(rows) {
            this.title = rows === true ? '新增服务商' : '编辑服务商';
            this.id = rows === true ? '' : rows.id;
            this.logo = '';
            if (rows === true) {
                this.$nextTick(() => {
                    this.events_form.resetFields();
                })
                this.visible = true;
            } else {
                this.id = rows.id;
                this.$nextTick(() => {
                    let values = this.events_form.getFieldsValue();
                    for (var key in rows) {
                        if (key == 'logo') {
                            this.logo = rows[key]
                        } else {
                            values[key] = rows[key]
                        }
                    }
                    this.events_form.setFieldsValue(values);
                });
                this.visible = true;
            }
        },
        uploadImg() {
            this.$refs.certificate.click()
        },
        async handleChange(e, filed) {
            e.preventDefault();
            let _this = this;
            let file = e.target.files[0];
            if (file === undefined) { return; }
            if (file.type.indexOf('image') === -1) {
                _this.$message.error("非法图片格式");
                e.target.value = "";
                return;
            }
            if (!(file.size / 1024 / 1024 < 1)) {
                _this.$message.error('图片大小不能超过 1MB!')
                e.target.value = "";
                return;
            }
            var params = new FormData();
            params.append("file", file);
            params.append("dirName", '平台配置');
            let { code, data } = await uploadNewFile(params);
            if (code === '1') {
                this.logo = data;
                e.target.value = "";
            }
        },
        addFormSubmit() {
            const that = this;
            this.events_form.validateFieldsAndScroll(async (err, values) => {
                if (!err) {
                    if (this.id) {
                        values.id = this.id;
                    }
                    values.logo = this.logo;
                    that.submitLoading = true;
                    const { code } = that.id ? await updatePark(values) : await addPark(values);
                    that.submitLoading = false;
                    if (code === '1') {
                        that.visible = false;
                        let state = that.id ? false : true;
                        that.$emit('on-ok', state)
                    }
                }
            });
        }
    }
}
</script>

